<template>
    <div class="mui-numbox" data-numbox-min='1'>
        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
        <input id="test" class="mui-input-numbox" type="number" value="1" @change="countChange" ref="numberCount"/>
        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>

    <!-- 只要值改变就要把值传递给父组件 -->
</template>

<script>
import mui from '../../lib/mui/js/mui.min.js'
export default {
    props:["maxcount"],
    // watch: {
    //     //属性监听
    //     'maxcount': function(newVal, oldVal){
    //         console.log('YYY===='+newVal)
    //         mui('.mui-numbox').numbox().setOption('max',parseInt(newVal))
    //     }
    // },
    methods: {
        countChange(){ // 传递给父组件中的方法：getSelectedCount
            this.$emit('getSelectedCount', parseInt(this.$refs.numberCount.value))
        }
    },
    mounted(){
        // 初始化 数字选择框 组件
        mui('.mui-numbox').numbox()
        console.log('hhhh====='+this.maxcount)
        // 从后台获取数据的时候，注释掉改行，解开 watch
         mui('.mui-numbox').numbox().setOption('max',parseInt(this.maxcount))
    },

}

</script>

<style lang="scss" scoped>

</style>